<template>
  <div>
    <div v-if="props.title != '危化品'" ref="pieChartContainer" style="width: 400px; height: 400px;"></div>
    <div v-else ref="pieChartContainer" style=" height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import * as echarts from 'echarts'
import { dayjs } from "element-plus"
const props = defineProps(['coundata', 'title'])
const pieChartContainer = ref(null)
let pieChart = null





const formatDateTimess = (dateTimeString, str) => {
  if (!dateTimeString) return null
  if (str != 'date') {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD HH:mm:ss')
    return date
  } else {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD')
    return date
  }

}



const initInventoryStatusChart = () => {
  if (props.title == '车辆') {
    let tadata = {
      xtable: [],
      ytable: [],
    }
    props.coundata.forEach(element => {
      tadata.xtable.push(dayjs(element.pass).format('YYMM'))
      tadata.ytable.push(element.amount)

    })
    pieChart = echarts.init(pieChartContainer.value)
    const pieOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: tadata.xtable
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: tadata.ytable,
          type: 'line'
        }
      ]
    }
    pieChart.setOption(pieOption)

  } else if (props.title == '危化品') {



    // // 提取日期作为 x 轴数据
    const xAxisData = props.coundata.data.map(item => dayjs(item.USE_TIME).format('MMDD'))

    // console.log(xAxisData)
    // // 动态收集区域信息


    const filteredFields = props.coundata.headers.filter(field => !field.includes("总时长"))
    // // 动态生成系列数据
    const seriesData = []
    filteredFields.forEach(area => {
      const seriesItem = {
        name: area,
        type: 'line',
        data: []
      }
      props.coundata.data.forEach(item => {
        const value = item[area] ? item[area] : 0
        seriesItem.data.push(value)
      })
      seriesData.push(seriesItem)
    })




    // 生成 ECharts 配置项
    const option = {
      legend: {
        data: props.coundata.headers
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value',
        name: '频次'
      },
      series: seriesData
    }


    pieChart = echarts.init(pieChartContainer.value)
    pieChart.setOption(option)
  } else {
    // 按日期和区域分组
    const groupedData = {}
    props.coundata.forEach(item => {
      const date = formatDateTimess(item.date_time, 'date')
      const area = item.abnormal_area
      const amount = parseFloat(item.amount)
      if (!groupedData[area]) {
        groupedData[area] = {}
      }
      if (!groupedData[area][date]) {
        groupedData[area][date] = []
      }
      groupedData[area][date].push(amount)
    })

    // 计算每个日期的平均值
    const averagedData = {}
    Object.keys(groupedData).forEach(area => {
      averagedData[area] = {}
      Object.keys(groupedData[area]).forEach(date => {
        const values = groupedData[area][date]
        const sum = values.reduce((acc, val) => acc + val, 0)
        averagedData[area][date] = sum / values.length
      })
    })

    // 提取日期和各区域的数据
    const allDates = []
    Object.values(averagedData).forEach(areaData => {
      Object.keys(areaData).forEach(date => {
        if (!allDates.includes(date)) {
          allDates.push(date)
        }
      })
    })
    allDates.sort()

    const seriesData = []
    Object.keys(averagedData).forEach(area => {
      const dataArray = allDates.map(date => averagedData[area][date] || 0)
      seriesData.push({
        name: area,
        type: 'line',
        data: dataArray,
        symbol: 'none'
      })
    })

    const dadadada = allDates.map(element => {
      return element = dayjs(element).format('MMDD')

    })

    pieChart = echarts.init(pieChartContainer.value)
    const pieOption = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['化工园区A', '化工园区B', '化工园区C']
      },
      xAxis: {
        type: 'category',
        data: dadadada
      },
      yAxis: {
        type: 'value'
      },
      series: seriesData
    }

    pieChart.setOption(pieOption)
  }




}

onMounted(() => {

  initInventoryStatusChart()
})
</script>

<style lang="scss" scoped>
</style>
